
<template>
  <div>
    <div class="login">

      <div class="login_box">
        <div class="left_box">
          <div class="login_time">
            <span>{{ day }}</span>
            <span>{{ time }}</span>
            <span>星期{{ dWeek }}</span>
          </div>
          <img src="../assets/login_bg.png" class="login_img" />
          <div class="login_title">{{ projectName }}</div>
        </div>
        <div class="right_box">
          <div class="login_form">
            <el-form
              :model="loginForm"
              :rules="rules2"
              ref="loginForm"
              label-position="left"
              label-width="0px"
            >
              <h3 class="title">系统登录</h3>
              <el-form-item prop="username">
                <el-input
                  type="text"
                  v-model="loginForm.username"
                  auto-complete="off"
                  placeholder="账号"
                >
                  <!--          <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />-->
                </el-input>
              </el-form-item>
              <el-form-item prop="password">
                <el-input
                  type="password"
                  v-model="loginForm.password"
                  auto-complete="off"
                  placeholder="密码"
                >
                  <!--          <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />-->
                </el-input>
              </el-form-item>

              <el-checkbox v-model="checked" checked class="password"
                >记住密码</el-checkbox
              >
              <el-form-item style="width: 100%" class="login_btn">
                <el-button
                  type="primary"
                  @click.native.prevent="handleSubmit"
                  :loading="logining"
                  >登录
                </el-button>

                <!--      <el-button type="primary" style="width:48%;" @click.native.prevent="registShop" :loading="register">店铺入驻-->
                <!--      </el-button>-->
                <el-button @click.native.prevent="handleReset">重置</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
      <div class="audit-number">
        <a href="https://beian.miit.gov.cn/" >豫ICP备2024053978号</a>
      </div>
      <div class="vue-particles">
        <!-- color: String类型。默认'#dedede'。粒子颜色。
      particleOpacity: Number类型。默认0.7。粒子透明度。
      particlesNumber: Number类型。默认80。粒子数量。
      shapeType: String类型。默认'circle'。可用的粒子外观类型有："circle","edge","triangle", "polygon","star"。
      particleSize: Number类型。默认80。单个粒子大小。
      linesColor: String类型。默认'#dedede'。线条颜色。
      linesWidth: Number类型。默认1。线条宽度。
      lineLinked: 布尔类型。默认true。连接线是否可用。
      lineOpacity: Number类型。默认0.4。线条透明度。
      linesDistance: Number类型。默认150。线条距离。
      moveSpeed: Number类型。默认3。粒子运动速度。
      hoverEffect: 布尔类型。默认true。是否有hover特效。
      hoverMode: String类型。默认true。可用的hover模式有: "grab", "repulse", "bubble"。
      clickEffect: 布尔类型。默认true。是否有click特效。
      clickMode: String类型。默认true。可用的click模式有: "push", "remove", "repulse", "bubble"。 -->
        <vue-particles
          color="#fff"
          :particleOpacity="0.7"
          :particlesNumber="50"
          shapeType="star"
          :particleSize="6"
          linesColor="#fff"
          :linesWidth="2"
          :lineLinked="true"
          :lineOpacity="0.4"
          :linesDistance="150"
          :moveSpeed="4"
          :hoverEffect="true"
          hoverMode="grab"
          :clickEffect="true"
          clickMode="repulse"
          class="lizi"
        >
        </vue-particles>
      </div>
    </div>

  </div>

</template>

<script>
//日期js
import dayjs from "dayjs";
export default {
  data() {
    return {
      timeId: null,
      weeks: ["日", "一", "二", "三", "四", "五", "六"],
      day: dayjs().format("YYYY/MM/DD"), //格式化年月日
      time: dayjs().add(1, "second").format("HH:mm:ss"),
      week: dayjs().day(), //获取星期几
      projectName: this.$projectName,
      logining: false,
      loginForm: {
        username: "",
        password: "",
        type: "0",
      },
      rules2: {
        username: [{ required: true, message: "请输入账号", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
      checked: true,
    };
  },
  computed: {
    //获得星期几的汉字
    dWeek() {
      return this.weeks[this.week + 0];
    },
  },
  mounted() {
    this.timeId = setInterval(() => {
      this.time = dayjs().add(1, "second").format("HH:mm:ss");
    }, 1000);
  },
  beforeDestroy() {
    //组件销毁前清楚定时器
    if (this.timeId) {
      clearInterval(this.timeId);
    }
  },
  methods: {
    handleReset() {
      this.$refs.loginForm.resetFields();
    },
    // registShop(){
    //   this.$router.push({path: '/ShopRegister'});
    // },

    handleSubmit(ev) {
      //表单校验：所有表单项校验成功才返回为true - 才能发送请求
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          this.logining = true; //显示加载框或忙等框
          this.$http
            .post("/login/account", this.loginForm)
            .then((res) => {
              if (res.data.success) {
                //登录成功
                //1.显示成功信息
                this.$message({
                  message: "登录成功",
                  type: "success",
                });
                //2.将token和logininfo保存到localStrorage中
                //解构表达式：快捷获取
                let { token, logininfo, menus, permissions } =
                  res.data.resultObj;
                localStorage.setItem("token", token);
                //注意：保存的是json格式的字符串，那么获取的时候需要进行转换才能使用json对象
                localStorage.setItem("logininfo", JSON.stringify(logininfo));
                localStorage.setItem("menus", JSON.stringify(menus));
                localStorage.setItem(
                  "permissions",
                  JSON.stringify(permissions)
                );
                //3.跳转到首页
                this.$router.push({ path: "/echarts" });
                //登录成功后刷新页面，防止出现菜单重复问题
                location.reload();
              } else {
                //登录失败
                this.$message({
                  message: res.data.message,
                  type: "error",
                });
              }
              this.logining = false; //关闭加载框或忙等框
            })
            .catch((res) => {
              this.$message({
                message: "系统错误",
                type: "error",
              });
              this.logining = false; //关闭加载框或忙等框
            });
        } else {
          console.log("表单校验失败!!!");
          return false;
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.vue-particles {
  position: absolute;
  width: 100%;
  height: 100%;
}
.login {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-image: url("../common/login.jpg");
  background-size: cover;
  position: absolute;
  overflow: hidden;
}
.login_box {
  width: 900px;
  height: 500px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0px 0px 10px 5px #00000040;
  position: relative;
  z-index: 1;
}
.login_form {
  width: 70%;
  height: 60%;
  .el-input {
    height: 38px;
    input {
      height: 38px;
    }
  }
  .input-icon {
    height: 39px;
    width: 14px;
    margin-left: 2px;
  }

  .title {
    margin: 0px auto 40px auto;
    text-align: center;
    font-size: 20px;
    color: #505458;
  }
  .remember {
    margin: 0px 0px 35px 0px;
  }
  .login_btn {
    padding: 10px 0;
    display: flex;
    justify-content: center;
  }
  .el-button {
    width: 120px;
  }
}
.left_box {
  width: 70%;
  height: 100%;
  background: #2d8cf0;
  display: flex;
  align-items: flex-end;
  flex-direction: column;
  justify-content: center;
  .login_time {
    position: absolute;
    top: 10px;
    left: 20px;
    color: #fff;
  }
  .login_img {
    width: 100%;
    height: 80%;
  }
  .login_title {
    font-size: 20px;
    font-weight: bold;
    font-family: "微软雅黑";
    color: #fff;
    margin: 0 40px;
  }
}
.right_box {
  width: 50%;
  height: 100%;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
.audit-number {
  text-align: center;
  margin-top: 700px;
  color: #555; /* Adjust color as needed */
  font-size: 14px; /* Adjust font size as needed */
}
</style>